<template>
  <div class="news-wrapper w-content">
    <div class="news-category-section d-flex flex-jc-sb">
      <div class="category-top fs-30 fw-700">新闻中心</div>
      <div class="category-wrap fs-16 c-666 d-flex flex-ai-c flex-jc-sb">
        <div v-for="(item, index) in categoryList" :key="'category' + item.id" class="category-item d-flex flex-ai-c flex-jc-sb">
          <div class="category-item-name" :class="{ 'active': categoryIndex === index }" @click="changeCategory(index, item.code)">{{ item.name }}</div>
          <div v-if="index < categoryList.length - 1" class="slice d-flex flex-ai-c">
            <img :src="sliceImg">
          </div>
        </div>
      </div>
    </div>
    <div class="news-content-section d-flex flex-jc-sb">
      <div class="news-top">
        <el-carousel height="360px" :interval="interval" indicator-position="none">
          <el-carousel-item v-for="(item, index) in loopList" :key="'top' + index">
            <div class="h-100 w-100 p-re" @click="toNewsDetail(item.id)">
              <img :src="imgUrl + item.titleImageId" class="w-100 top-image">
              <div class="p-ab top-image-title fs-16">{{ item.title }}</div>
            </div>

          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="news-wrap fs-16 c-333">
        <div v-for="(item, index) in newsList" :key="'news' + item.id" class="w-100" @click="toNewsDetail(item.id)">
          <div v-if="index === 0" class="w-100" style="height: 128px">
            <div class="w-100 news-one-title fs-24 fw-700">{{ item.title }}</div>
            <div class="w-100 news-one-desc fs-14 c-999">{{ item.abstractContent }}</div>
          </div>
          <div v-if="index !== 0" class="w-100 d-flex flex-jc-sb">
            <div class="news-item-title d-flex flex-ai-c"><div class="title-prex" />{{ item.title }}</div>
            <div class="news-item-time c-999">{{ item.publishedTime | formatDate }}</div>
          </div>
        </div>
        <div class="news-more" @click="moreNews">更多新闻</div>
      </div>
    </div>
  </div>
</template>

<script>
import { articleList, categoryList } from '@/api/rest/portal/portal'
import portalUtil from '@/utils/portal-util'
import { formatDate } from '@/utils/formatdate'

export default {
  name: 'IndexNews',
  filters: {
    formatDate(val) {
      if (val) {
        return formatDate(val)
      }
    }
  },
  data() {
    return {
      categoryIndex: 0,
      interval: 5000,
      sliceImg: require('@/assets/portal_images/slice.png'),
      categoryList: [],
      imgUrl: process.env.VUE_APP_BASE_API + '/api/portal/viewImage/',
      loopList: [],
      newsList: []
    }
  },
  created() {
    this.getCategoryList()
    this.loopArticleList()
    this.articleList('XWZX')
  },
  methods: {
    toNewsDetail(id) {
      this.$router.push({ path: '/newsDetail', query: { id, currentIndex: this.categoryIndex, categoryTitle: '新闻资讯' }})
    },
    changeCategory(index, code) {
      this.categoryIndex = index
      this.articleList(code)
    },
    moreNews() {
      portalUtil.gotoPageIndex(this, 1, {})
    },
    getCategoryList() {
      categoryList({ parentCode: 'XWZX' }).then(res => {
        if (res.data && res.data.length > 0) {
          res.data.forEach((item, index) => {
            if (index === 0) {
              this.articleList(item.code)
            }
            if (index < 4) {
              this.categoryList.push(item)
            }
          })
        }
      })
    },
    loopArticleList() {
      articleList({ categoryCodes: 'LOOP', page: 1, limit: 5 }).then(res => {
        this.loopList = res.data.items
      })
    },
    articleList(categoryCode) {
      articleList({ categoryCodes: categoryCode, page: 1, limit: 6 }).then(res => {
        this.newsList = res.data.items
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.news-wrapper {
  padding: 64px 0;
  .news-category-section {
    line-height: 53px;
    height: 53px;
    border-bottom: 4px solid #F2F2F2;
    .category-top {
      width: 480px;
    }
    .category-wrap {
      width: 680px;
      .category-item {
        width: 24%;
        text-align: center;
        .category-item-name {
          cursor: pointer;
          position: relative;
          text-align: center;
          width: calc(100% - 18px);
        }
      }
      .active {
        color: $portalBlueColor;
        font-size: 24px;
        font-weight: bold;
      }
      .active:before {
        content: "";
        height: 6px;
        overflow: hidden;
        display: block;
        left:0;
        bottom: 0px;
        position: absolute;
        width: 100%;
        background: $portalBlueColor;
        transform-origin: left;
        animation: scaleX 6s linear infinite;
      }
      .slice {
        width: 18px;
        height: 100%;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  .news-content-section {
    margin-top: 40px;
    .news-top {
      width: 480px;
      .top-image {
        height: 360px;
        width: 100%;
        cursor: pointer;
      }
      .top-image-title {
        bottom: 0px;
        color: white;
        width: 100%;
        text-align: center;
        white-space: nowrap; //禁止换行
        overflow: hidden;
        text-overflow: ellipsis; //...
        background: -webkit-linear-gradient(RGBA(183,186,185, .7), #555555); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(RGBA(183,186,185, .7), #555555); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(RGBA(183,186,185, .7), #555555); /* Firefox 3.6 - 15 */
        background: linear-gradient(RGBA(183,186,185, .7), #555555); /* 标准的语法（必须放在最后） */
        padding: 5px 10px;
      }
    }
    .news-wrap {
      width: 680px;
      position: relative;
      .news-one-title {
        line-height: 40px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2; //显示几行
        cursor: pointer;
      }
      .news-one-title:hover {
        color: $portalBlueColor;
      }
      .news-one-desc {
        margin-top:8px;
        line-height: 20px;
        height: 40px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2; //显示几行
      }
      .news-item-title {
        width: 80%;
        margin-top:12px;
        line-height: 21px;
        height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .news-item-title:hover {
        color: $portalBlueColor;
      }
      .title-prex {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #D9D9D9;
        margin-right: 12px;
      }
      .news-item-time {
        width: 20%;
        margin-top:12px;
        line-height: 21px;
        height: 21px;
        text-align: right;
      }
      .news-more {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 104px;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        border: 1px solid #D9D9D9 ;
        text-align: center;
        cursor: pointer;
      }
      .news-more:hover {
        color: $portalBlueColor;
      }
    }
  }
}
</style>
